<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="../06_font&background/fa/css/all.css">
    <title>京东顶部导航条</title>
    <style>
        body{
            font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
        }
        a{
            text-decoration: none;
            color:#999;
        }
        a:hover{
            color: #e33333;
        }
        .nav-container{
            height: 30px;
            background-color: #e3e4e5;  
            line-height: 30px;
            border-bottom: 1px solid #ddd;
        }
        .nav{
            margin: 0 auto;
            width: 1180px;
            color: #999;
        }
        .clearfix::after,.clearfix::before{
            content: "";
            display: table;
            clear:both;
        }
        .position{
            padding-right: 10px;
            border: 1px transparent solid;
        }
        .position,.right-nav>li{
            float: left;
            
        }
        .position:hover{
            background-color: #fff;
            border: 1px rgba(204,204,204) solid;
        }
        .position i{
            color: #f10215;
        }
        .position:hover>.box{
            display: block;
        }
        .current-city{
           border-bottom: none;
        }   
        .box{
            width: 320px;
            height: 436px;
            background-color: #fff;
            border:1px solid rgb(204,204,204);
            margin-left: -0.5px;
            border-top: none;
            position: absolute;
            display: none;
            box-shadow: 0 10px 10px rgba(204,204,204);
            top: 31px;
          
        }
        .box ul{
            margin-left: 8px;
        }
        .box ul li{
            margin:10px 20px 10px 0px;
            padding: 0px 5px;
            height: 25px;
            float: left;
            text-align: center;
            line-height: 25px;
        }
        .box ul li:hover{
           background-color:rgba(153,153,153,.3);
           color:#f10215
        }
         .right-nav{
            float: right;
        }
       
         .right-nav>li:first-child{
            margin-right: 8px;
        }
       .right-nav>li:nth-of-type(2)>a, .right-nav>li:nth-of-type(6)>a{
            color: #f10215;
        }
         li.line{
            margin:10px 12px 0px;
            width: 1px;
            height: 10px;
            background-color: #999;
        }
        i{
            margin-left: 6px;
        }
    </style>
</head>
<body>
    <div class="nav-container">
      <div class="nav clearfix">
       
            <div class="position">
              <div class="current-city">
                <i class="fas fa-map-marker-alt"></i>
                <a href="#">
                广东
            </a>
              </div>
            <div class="box">
                <ul>
                    <li>北京</li>
                    <li>上海</li>
                    <li>天津</li>
                    <li>重庆</li>
                </ul>
                <ul>
                    <li>河北</li>
                    <li>山西</li>
                    <li>河南</li>
                    <li>辽宁</li>
                </ul>
                <ul>
                    <li>吉林</li>
                    <li>黑龙江</li>
                    <li>内蒙古</li>
                    <li>江苏</li>
                </ul>
                <ul>
                    <li>山东</li>
                    <li>安徽</li>
                    <li>浙江</li>
                    <li>福建</li>
                </ul>
            </div>
            </div> 
       
    
        <ul class="right-nav clearfix">
            <li><a href="#">你好,请登录</a></li>
            <li><a href="#">免费注册</a></li>
            <li class="line"></li>
            <li><a href="#">我的订单</a></li>
            <li class="line"></li>
            <li><a href="#">我的京东</a><i class="fas fa-angle-down"></i></li>
            <li class="line"></li>
            <li><a href="#">京东会员</a></li>
            <li class="line"></li>
            <li><a href="#">企业采购</a><i class="fas fa-angle-down"></i></li>
            <li class="line"></li>
            <li><span>客户服务</span></li>
            <li class="line"></li>
            <li><span>网站导航<i class="fas fa-angle-down"></i></span></li>
            <li class="line"></li>
            <li><span>手机京东</span></li>
        </ul>
      </div>
    </div>
</body>
</html>